<template>
  <div class="canvas">
    <map-canvas
      @addContent="addContent"
      @canvasClick="canvasClick"
    ></map-canvas>
  </div>
</template>

<script>
import MapCanvas from "@/components/MapCanvas/index.vue";
export default {
  components: { MapCanvas },
  data() {
    return {};
  },
  methods: {
    addContent(event) {
      // 开始设置图片
      const img = new Image();
      img.src = require("@/assets/demo.jpg");
      img.onload = () => {
        event.drawImage(img, 110, 110, 180, 180);
      };
      // 为图片增加边框
      event.beginPath();
      event.lineWidth = "1";
      event.strokeStyle = "red";
      event.moveTo(100, 100);
      event.lineTo(100, 300);
      event.lineTo(300, 300);
      event.lineTo(300, 100);
      event.lineTo(100, 100);
      event.stroke();
    },
    canvasClick(x, y) {
      // 每个页面不同逻辑判断
      if (x >= 100 && x <= 300 && y >= 100 && y <= 300) {
        // 触发回调函数
        this.rectangleClickCallback();
      }
    },
    // 矩形点击后的回调函数
    rectangleClickCallback() {
      console.log("矩形被点击了！");
    },
  },
};
</script>
